<script>
export default{
  data(){
    return{
      showPopover: false,
      actions: [
        {'新增': 'none'}
      ],
      shop_o: "like-o",
      shop_color: {},
      heightXin: 0,
      anchors:[0,Math.round(0.9*window.innerHeight)],
      chooseColor: '#000000',
      taskName: ''
    }
  },
  created(){
    if(localStorage.getItem('taskCls') != null){
      this.actions = JSON.parse(localStorage.getItem('taskCls'))
    }
  },
  methods:{
    chooseCls(item){
      // item is {'新增': 'none'}
      var tmpItem = Object.entries(item)[0]
      // tmpItem is ['新增': 'none']

      if(tmpItem[0] == '新增'){
        this.heightXin = this.anchors[1]
      }else{
        this.shop_o = 'like'
        this.shop_color = item  // shop_color 需要修改 lyc
      }
      this.showPopover = false
      this.$emit("chooseClass",item);
    },
    addTaskCls(){
      var obj = {}
      obj[this.taskName] = this.chooseColor
      // obj = {"yundong": "#ff0099"}
      this.actions.unshift(obj)
      this.heightXin = 0;
      this.shop_o = 'star'
      this.shop_color = obj
      localStorage.setItem('taskCls',JSON.stringify(this.actions))
    },
  }
}
</script>
<template>
  <div class="cls">
    <van-popover class="cls-pop" v-model:show="showPopover">
      <div v-for="item in actions" style="padding: 10px; text-align: right;" @click="chooseCls(item)">
        <van-icon :name="Object.entries(item)[0][1] == 'none'? 'plus' :'like' " :style='"color:"+Object.entries(item)[0][1]+";display:inline-block;margin-right: 5px;"' />
        <span>{{Object.entries(item)[0][0]}}</span>
        <span>{{ item }}</span>
      </div>
      <template #reference>
        <div style="width: 100%; height: 30px;text-align: center;font-size: 1.2em;line-height: 30px;">
          <span>{{ Object.keys(shop_color)[0] }}</span>
          <van-icon :name="shop_o" :color="Object.values(shop_color)[0]" />
        </div>
      </template>
    </van-popover>
  </div>
  <van-floating-panel v-model:height="heightXin" :anchors="anchors" duration="0.3">
    <input type="color" v-model="chooseColor">
    <input type="text" placeholder="请输入任务类型名" v-model="taskName">
    <van-button type="primary" @click="addTaskCls()">添加</van-button>
  </van-floating-panel>
</template>